<!DOCTYPE html>
<html class="no-js" lang="">
	<head>
		<meta charset="utf-8" />
		<title>Single Profile Page</title>
		<meta name="description" content="" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<!-- Favicons -->
		<link rel="shortcut icon" href="assets/img/favicon.png" />

		<!-- All CSS Here-->
		<!-- Bootstrap CSS -->
		<link rel="stylesheet" href="assets/css/bootstrap.min.css" />
		<!-- Fontawesome -->
		<link rel="stylesheet" href="assets/css/fontawesome-all.min.css" />
		<!-- Mobile menu -->
		<link rel="stylesheet" href="assets/css/meanmenu.css" />
		<!-- Owl-carousel -->
		<link rel="stylesheet" href="assets/css/owl.carousel.min.css" />
		<!-- slick slider -->
		<link rel="stylesheet" href="assets/css/slick.css" />
		<!-- animateit slider -->
		<link rel="stylesheet" href="assets/css/animateit.css" />
		<!-- Main css -->
		<link rel="stylesheet" href="assets/css/default.css" />
		<link rel="stylesheet" href="assets/css/style.css" />
		<!-- Responsive css -->
		<link rel="stylesheet" href="assets/css/responsive.css" />
	</head>

	<body>
		<!--[if lte IE 9]>
			<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
		<![endif]-->

		<!--********************************
    ***** Code Start From Here *****
    ******************************** -->

		<!-- preloader -->
		<div class="preloader"></div>

		<!-- Settings -->
		<div class="theme_settings">
			<button type="button" id="settings_toggler">
				<i class="fas fa-cog"></i>
			</button>
			<h3>Themes settings</h3>

			<h5>Primary Colors</h5>
			<div class="setting_colors">
				<button data-color="#0284c7" class="prime_1 change_prime_color">
					<i class="icon fas fa-check"></i>
				</button>
				<button data-color="#4f46e5" class="prime_2 change_prime_color">
					<i class="icon fas fa-check"></i>
				</button>
				<button data-color="#1abc9c" class="prime_3 change_prime_color">
					<i class="icon fas fa-check"></i>
				</button>
				<button data-color="#F79F1F" class="prime_4 change_prime_color">
					<i class="icon fas fa-check"></i>
				</button>
			</div>

			<h5>Secondary Colors</h5>
			<div class="setting_colors">
				<button data-color="#18181b" class="second_1 change_sec_color">
					<i class="icon fas fa-check"></i>
				</button>
				<button data-color="#1e293b" class="second_2 change_sec_color">
					<i class="icon fas fa-check"></i>
				</button>
				<button data-color="#374151" class="second_3 change_sec_color">
					<i class="icon fas fa-check"></i>
				</button>
				<button data-color="#44403c" class="second_4 change_sec_color">
					<i class="icon fas fa-check"></i>
				</button>
			</div>
		</div>

		<!-- back to top -->
		<button id="back-to-top" class="back-to-top-hide">
			<i class="fas fa-arrow-up"></i>
		</button>

		<!-- Header area started -->
		<header>
			<div class="container">
				<div class="row">
					<!-- header logo -->
					<div class="col-md-2">
						<div class="header-logo">
							<h1>
								<a href="index.html">unique<span>G</span></a>
							</h1>
						</div>
					</div>
					<!-- navbar -->
					<div class="col-md-10 col-lg-9 col-xl-8 offset-xl-2 offset-lg-1 offset-0 d-none d-md-block">
						<nav>
							<ul>
								<li><a class="link-hover" href="index.html">Home</a></li>
								<li><a class="link-hover" href="about.html">About Us</a></li>
								<li class="with-submenu">
									<a class="link-hover" href="#">Pages</a>
									<ul class="sub-menu">
										<li><a href="service.html">Services</a></li>
										<li><a href="blog.html">Blog</a></li>
										<li><a href="single-portfolio.html">Portfolio</a></li>
										<li><a href="about.html">About</a></li>
									</ul>
								</li>
								<li><a class="link-hover" href="portfolio.html">Portfolio</a></li>
								<li><a class="link-hover" href="contact.html">Contact</a></li>
								<li class="round-border cart">
									<a href="#"><i class="fa fa-briefcase"></i><span>2</span></a>
									<!-- cart wrapper -->
									<div class="cart-wrapper">
										<h3>SHOPPING CART</h3>
										<!-- single cart -->
										<div class="single-cart d-flex">
											<div class="cart-img">
												<img src="assets/img/header/cart/single-cart-2.jpg" alt="" />
											</div>
											<div class="cart-content">
												<h6>How to become a Web Developer</h6>
												<p><span class="cart-amount">1x</span> <span class="cart-cost">$79.99</span></p>
												<button class="cart-del-btn">x Delete</button>
											</div>
										</div>
										<!-- single cart end -->
										<!-- single cart -->
										<div class="single-cart d-flex">
											<div class="cart-img">
												<img src="assets/img/header/cart/single-cart-1.jpg" alt="" />
											</div>
											<div class="cart-content">
												<h6>How to become a UI Designer</h6>
												<p><span class="cart-amount">1x</span> <span class="cart-cost">$79.99</span></p>
												<button class="cart-del-btn">x Delete</button>
											</div>
										</div>
										<!-- single cart end -->
										<!-- cart footer -->
										<div class="cart-footer">
											<a href="#" class="cart-footer-btn checkout">checkout</a>
											<a href="#" class="cart-footer-btn view-cart">view-cart</a>
											<a href="#" class="cart-footer-btn add-item">add-item</a>
										</div>
									</div>
								</li>
								<li class="round-border">
									<a href="#"><i class="fas fa-search"></i></a>
									<div class="search-box">
										<form action="">
											<input type="text" placeholder="Search Something" />
											<button type="submit"><i class="fas fa-search"></i></button>
										</form>
									</div>
								</li>
								<li class="lang-select">
									<a href="#">EN</a>
									<ul class="sub-lang">
										<li><a href="#">FR</a></li>
										<li><a href="#">BN</a></li>
									</ul>
								</li>
							</ul>
						</nav>
					</div>
				</div>
				<!-- mobile menu -->
				<div class="sidebar-icon d-block d-md-none">
					<a href="#" id="open-sidebar"><img src="assets/img/header/mobile-menu-bar.png" alt="" /></a>
				</div>
			</div>
		</header>
		<!-- header area end -->

		<!-- Mobile view sidebar area -->
		<div class="sidebar d-block d-md-none">
			<!-- close icon -->

			<!-- search box -->
			<div class="sidebar-search-box d-flex justify-content-between align-items-center mb-50">
				<div class="sidebar-close">
					<a href="#" id="close-sidebar"><i class="fa fa-plus"></i></a>
				</div>
				<form action="">
					<input type="text" />
					<button type="submit"><i class="fas fa-search"></i></button>
				</form>
			</div>
			<!-- search box enc -->

			<!-- sideber menu -->
			<div class="sidebar-menu mb-30">
				<ul>
					<li><a href="index.html">Home</a></li>
					<li><a href="about.html">About Us</a></li>
					<li>
						<a class="with-side-sub">Pages <i class="fas fa-sort-down"></i></a>
						<ul class="sidebar-sub-menu">
							<li><a href="service.html">Services</a></li>
							<li><a href="blog.html">Blog</a></li>
							<li><a href="single-portfolio.html">Portfolio</a></li>
							<li><a href="about.html">About</a></li>
						</ul>
					</li>
					<li><a href="portfolio.html">Portfolio</a></li>
					<li><a href="contact.html">Contact</a></li>
				</ul>
			</div>

			<!-- sidebar populer tag -->
			<div class="sidebar-tag">
				<h6 class="sidebar-tag-title">popular tag</h6>
				<a href="#">#creative</a>
				<a href="#">#wordpress theme</a>
				<a href="#">#website design</a>
				<a href="#">#html 5</a>
				<a href="#">#multi-purpose</a>
				<a href="#">#template</a>
			</div>
		</div>
		<!-- sidebar area end -->

		<!-- slider area -->
		<section class="single-profile-slider slider-area">
			<div class="slider-active">
				<!-- single slider -->
				<div class="single-slider">
					<div class="container">
						<div class="row">
							<div class="col-12 text-center">
								<div class="slider-title">
									<h1>Steven Smith</h1>
									<h2>Web Developer</h2>
								</div>
								<!-- single profile logo -->
								<div class="single-profile-icon">
									<a href="#"><i class="fab fa-facebook-f"></i></a>
									<a href="#"><i class="fab fa-twitter"></i></a>
									<a href="#"><i class="fab fa-google"></i></a>
									<a href="#"><i class="fab fa-youtube"></i></a>
									<a href="#"><i class="fab fa-linkedin"></i></a>
									<a href="#"><i class="fab fa-github"></i></a>
								</div>
								<!-- profile-pic -->
								<div class="single-profile-pic">
									<img src="assets/img/single profile/single-profile-img.jpg" alt="" />
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- single slider-end -->
				<!-- single slider -->
				<div class="single-slider">
					<div class="container">
						<div class="row">
							<div class="col-12 text-center">
								<div class="slider-title">
									<h2>We Provide</h2>
									<h1>Creative Design Ideas</h1>
								</div>
								<div class="hire-us-btn">
									<h4 class="d-none d-lg-inline-block">Creative, Powerfull, Eye-catching</h4>
								</div>
								<!-- profile-pic -->
								<div class="single-profile-pic">
									<img src="assets/img/single profile/single-profile-img.jpg" alt="" />
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- single slider-end -->
			</div>
		</section>
		<!-- slider area end -->

		<!-- about me area -->
		<section class="about-me-area pb-60">
			<div class="container">
				<div class="section-title text-center animate-it-right">
					<h6>Who I am</h6>
					<h3>About Me</h3>
				</div>
				<!-- about me content -->
				<div class="row">
					<div class="col-md-12">
						<div class="about-me-text animate-it-left">
							<p>Do et ipsum voluptate dolor excepteur laborum irure exercitation. Reprehenderit et officia magna pariatur in consequat reprehenderit exercitation dolor laborum. Est qui aliqua ad nulla duis sunt magna dolor cupidatat qui laboris duis. Quis ut cupidatat eu fugiat mollit ad proident.</p>

							<p>Incididunt anim irure cupidatat exercitation nisi et culpa dolor Lorem proident. Incididunt et magna irure veniam ad esse. Nostrud laboris sint aliquip quis culpa culpa ea voluptate. Et in tempor elit anim adipisicing esse ad sunt est deserunt quis deserunt cillum fugiat. Non officia mollit culpa occaecat mollit consectetur sint labore est duis. Pariatur anim sit officia veniam laborum.</p>
						</div>
					</div>
					<!-- cv details -->
					<div class="col-md-6 col-lg-5 animate-it-up">
						<div class="cv-details">
							<p><span>Birthday </span>: 01-01-1988</p>
							<p><span>Phone </span>: 1 (800) 123 4567</p>
							<p><span>Email </span>: support@email.com</p>
							<p><span>Website </span>: www.example.com</p>
							<p><span>Address </span>: 123 Main Street, New York, NY 01001</p>
						</div>
						<div class="signeture">
							<p class="style-signeture">Steven Smith</p>
						</div>
						<div class="cv-downlaod">
							<a href="#" class="cv-btn"><i class="fas fa-download"></i> Download cv</a>
						</div>
					</div>
					<!-- cv hobbies -->
					<div class="col-md-6">
						<div class="cv-hobbies animate-it-up">
							<h5>Hobires & Interests</h5>
							<div class="row">
								<!-- single hobbie -->
								<div class="col-3">
									<div class="single-hobbie">
										<div class="single-hobie-logo">
											<i class="fas fa-gamepad"></i>
											<span>Game</span>
										</div>
									</div>
								</div>
								<div class="col-3">
									<div class="single-hobbie">
										<div class="single-hobie-logo">
											<i class="fas fa-headphones"></i>
											<span>Game</span>
										</div>
									</div>
								</div>
								<div class="col-3">
									<div class="single-hobbie">
										<div class="single-hobie-logo">
											<i class="fas fa-plane"></i>
											<span>Song</span>
										</div>
									</div>
								</div>
								<div class="col-3">
									<div class="single-hobbie">
										<div class="single-hobie-logo">
											<i class="fab fa-apple"></i>
											<span>Mac OS</span>
										</div>
									</div>
								</div>
								<div class="col-3">
									<div class="single-hobbie">
										<div class="single-hobie-logo">
											<i class="fas fa-video"></i>
											<span>movies</span>
										</div>
									</div>
								</div>
								<div class="col-3">
									<div class="single-hobbie">
										<div class="single-hobie-logo">
											<i class="fas fa-mug-hot"></i>
											<span>Coffies</span>
										</div>
									</div>
								</div>
								<div class="col-3">
									<div class="single-hobbie">
										<div class="single-hobie-logo">
											<i class="fas fa-car"></i>
											<span>car</span>
										</div>
									</div>
								</div>
								<div class="col-3">
									<div class="single-hobbie">
										<div class="single-hobie-logo">
											<i class="fas fa-futbol"></i>
											<span>Football</span>
										</div>
									</div>
								</div>
								<!-- single hobbie end -->
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>

		<!-- resume area -->
		<section class="resume-area pt-100 pb-120">
			<div class="container">
				<!-- section title -->
				<div class="section-title text-center animate-it-left">
					<h6>See my resume</h6>
					<h3>Resume</h3>
				</div>

				<div class="row">
					<div class="col-md-12 text-center">
						<div class="resume-title lg-content animate-it-down">
							<h3>experiences</h3>
						</div>
					</div>
					<!-- single resume -->
					<div class="col-md-6">
						<div class="single-resume text-md-right animate-it-left">
							<h4>Junior developer</h4>
							<h5>Google <span></span> 2008 - 2010</h5>
							<p>Id eiusmod occaecat laboris deserunt ex voluptate ex minim officia duis nulla tempor ut. Excepteur qui labore ea ea cupidatat laborum elit irure consequat ullamco pariatur lorem ipsum is mesure.</p>
						</div>
					</div>
					<!-- single resume end -->
					<!-- single resume -->
					<div class="col-md-6">
						<div class="single-resume animate-it-right">
							<h4>Senior developer</h4>
							<h5>Yahoo <span></span> 2008 - 2010</h5>
							<p>Id eiusmod occaecat laboris deserunt ex voluptate ex minim officia duis nulla tempor ut. Excepteur qui labore ea ea cupidatat laborum elit irure consequat ullamco pariatur lorem ipsum is mesure.</p>
						</div>
					</div>
					<!-- single resume end -->
					<!-- single resume -->
					<div class="col-md-6">
						<div class="single-resume text-md-right animate-it-left">
							<h4>Junior developer</h4>
							<h5>Google <span></span> 2008 - 2010</h5>
							<p>Id eiusmod occaecat laboris deserunt ex voluptate ex minim officia duis nulla tempor ut. Excepteur qui labore ea ea cupidatat laborum elit irure consequat ullamco pariatur lorem ipsum is mesure.</p>
						</div>
					</div>
					<!-- single resume end -->
					<!-- single resume -->
					<div class="col-md-6">
						<div class="single-resume animate-it-right">
							<h4>Senior developer</h4>
							<h5>Yahoo <span></span> 2008 - 2010</h5>
							<p>Id eiusmod occaecat laboris deserunt ex voluptate ex minim officia duis nulla tempor ut. Excepteur qui labore ea ea cupidatat laborum elit irure consequat ullamco pariatur lorem ipsum is mesure.</p>
						</div>
					</div>
					<!-- single resume end -->
					<div class="col-md-12 text-center mt-50">
						<div class="resume-title animate-it-down">
							<h3>education</h3>
						</div>
					</div>
					<!-- single resume -->
					<div class="col-md-6">
						<div class="single-resume text-md-right animate-it-left">
							<h4>bachelors degree</h4>
							<h5>Google <span></span> 2008 - 2010</h5>
							<p>Id eiusmod occaecat laboris deserunt ex voluptate ex minim officia duis nulla tempor ut. Excepteur qui labore ea ea cupidatat laborum elit irure consequat ullamco pariatur lorem ipsum is mesure.</p>
						</div>
					</div>
					<!-- single resume end -->
					<!-- single resume -->
					<div class="col-md-6">
						<div class="single-resume animate-it-right">
							<h4>masters degree</h4>
							<h5>Yahoo <span></span> 2008 - 2010</h5>
							<p>Id eiusmod occaecat laboris deserunt ex voluptate ex minim officia duis nulla tempor ut. Excepteur qui labore ea ea cupidatat laborum elit irure consequat ullamco pariatur lorem ipsum is mesure.</p>
						</div>
					</div>
					<!-- single resume end -->
					<!-- single resume -->
					<div class="offset-md-6 col-md-6 animate-it-right">
						<div class="single-resume">
							<h4>graduation</h4>
							<h5>Yahoo <span></span> 2008 - 2010</h5>
							<p>Id eiusmod occaecat laboris deserunt ex voluptate ex minim officia duis nulla tempor ut. Excepteur qui labore ea ea cupidatat laborum elit irure consequat ullamco pariatur lorem ipsum is mesure.</p>
						</div>
					</div>
					<!-- single resume end -->
				</div>
			</div>
		</section>

		<!-- work area -->
		<section class="work-area pt-80 pb-">
			<div class="container">
				<div class="section-title text-center animate-it-up">
					<h6>What I do</h6>
					<h3>My Work</h3>
				</div>
				<!-- work text -->
				<div class="row">
					<!-- portfolio menu -->
					<div class="col-md-12">
						<div class="portfolio-menu animate-it-right">
							<button class="active" data-filter="*">ALL</button>
							<button data-filter=".cat-2">WEBDESIGN</button>
							<button data-filter=".cat-3">TYPO</button>
							<button data-filter=".cat-4">BRANDING</button>
							<button data-filter=".cat-5">DEVELOPEMENT</button>
						</div>
					</div>
				</div>
				<!-- work text end -->
				<!-- work image -->
				<div class="row portfolio-active mb-30 animate-it-up animate-it-left">
					<!-- single portfolio img -->
					<div class="col-md-6 grid-item cat-1 cat-5">
						<div class="portfolio-img mb-30">
							<img src="assets/img/work/work-img-1.jpg" alt="" />
							<div class="hover-content">
								<a href="#"><i class="fa fa-search"></i></a>
							</div>
						</div>
					</div>
					<!-- single portfolio img end -->
					<!-- single portfolio img -->
					<div class="col-md-6 grid-item cat-1 cat-5 cat-3">
						<div class="portfolio-img mb-30">
							<img src="assets/img/work/work-img-2.jpg" alt="" />
							<div class="hover-content">
								<a href="#"><i class="fa fa-search"></i></a>
							</div>
						</div>
					</div>
					<!-- single portfolio img end -->
					<!-- single portfolio img -->
					<div class="col-md-6 grid-item cat-1 cat-2 cat-4">
						<div class="portfolio-img mb-30">
							<img src="assets/img/work/work-img-3.jpg" alt="" />
							<div class="hover-content">
								<a href="#"><i class="fa fa-search"></i></a>
							</div>
						</div>
					</div>
					<!-- single portfolio img end -->
					<!-- single portfolio img -->
					<div class="col-md-6 grid-item cat-5">
						<div class="portfolio-img mb-30">
							<img src="assets/img/work/work-img-4.jpg" alt="" />
							<div class="hover-content">
								<a href="#"><i class="fa fa-search"></i></a>
							</div>
						</div>
					</div>
					<!-- single portfolio img end -->
					<!-- single portfolio img -->
					<div class="col-md-6 grid-item cat-3 cat-2">
						<div class="portfolio-img mb-30">
							<img src="assets/img/work/work-img-5.jpg" alt="" />
							<div class="hover-content">
								<a href="#"><i class="fa fa-search"></i></a>
							</div>
						</div>
					</div>
					<!-- single portfolio img end -->
					<!-- single portfolio img -->
					<div class="col-md-6 grid-item cat-2">
						<div class="portfolio-img mb-30">
							<img src="assets/img/work/work-img-6.jpg" alt="" />
							<div class="hover-content">
								<a href="#"><i class="fa fa-search"></i></a>
							</div>
						</div>
					</div>
					<!-- single portfolio img end -->
				</div>
				<!-- work image end -->
				<!-- read more btn -->
				<div class="row">
					<div class="col-12 text-center">
						<a href="#" class="load-more-btn">Load More</a>
					</div>
				</div>
			</div>
		</section>
		<!-- work area end -->

		<!-- counter area -->
		<section class="counter-area single-profile pt-65 pb-30">
			<div class="container">
				<!-- section title -->
				<div class="section-title text-center animate-it-down">
					<h6>Setisfied Clients</h6>
				</div>

				<div class="row">
					<!-- single counter -->
					<div class="col-md-3 text-center">
						<div class="single-counter animate-it-left">
							<div class="counter-amount">
								<p><span class="counter">1.300</span>+</p>
							</div>
							<div class="counter-text">
								<p>satisfied customers</p>
							</div>
						</div>
					</div>
					<!-- single counter end -->
					<!-- single counter -->
					<div class="col-md-3 text-center">
						<div class="single-counter animate-it-up">
							<div class="counter-amount">
								<p><span class="counter">3.242</span></p>
							</div>
							<div class="counter-text">
								<p>created designs assets</p>
							</div>
						</div>
					</div>
					<!-- single counter end -->
					<!-- single counter -->
					<div class="col-md-3 text-center">
						<div class="single-counter animate-it-down">
							<div class="counter-amount">
								<p><span class="counter">12</span>M</p>
							</div>
							<div class="counter-text">
								<p>lines of code</p>
							</div>
						</div>
					</div>
					<!-- single counter end -->
					<!-- single counter -->
					<div class="col-md-3 text-center">
						<div class="single-counter no-border animate-it-right">
							<div class="counter-amount">
								<p><span class="counter">284</span>+</p>
							</div>
							<div class="counter-text">
								<p>built websites</p>
							</div>
						</div>
					</div>
					<!-- single counter end -->
				</div>
			</div>
		</section>
		<!-- counter area end -->

		<!-- skill area -->
		<section class="skill-area pt-100 pb-100">
			<div class="container">
				<!-- section title -->
				<div class="section-title text-center animate-it-right">
					<h6>what i can</h6>
					<h3>my skills</h3>
				</div>
				<div class="row">
					<!-- single skill start -->
					<div class="col-md-3 col-6 text-center">
						<div class="single-skill animate-it-left">
							<div class="animateit" data-percent="95" data-scale-color="#ffb400">
								<p>95<span>%</span></p>
							</div>
							<div class="chart-content">
								<h5>HTML5/CSS3</h5>
								<p>Laboris enim est sint do minim nostrud tempor sunt consectetur nostrud nisi aliqu utan derosi.</p>
							</div>
						</div>
					</div>
					<!-- single skill end -->
					<!-- single skill start -->
					<div class="col-md-3 col-6 text-center">
						<div class="single-skill animate-it-right">
							<div class="animateit" data-percent="73" data-scale-color="#ffb400">
								<p>73<span>%</span></p>
							</div>
							<div class="chart-content">
								<h5>javascript</h5>
								<p>Laboris enim est sint do minim nostrud tempor sunt consectetur nostrud nisi aliqu utan derosi.</p>
							</div>
						</div>
					</div>
					<!-- single skill end -->
					<!-- single skill start -->
					<div class="col-md-3 col-6 text-center">
						<div class="single-skill animate-it-up">
							<div class="animateit" data-percent="83" data-scale-color="#ffb400">
								<p>83<span>%</span></p>
							</div>
							<div class="chart-content">
								<h5>wordpress</h5>
								<p>Laboris enim est sint do minim nostrud tempor sunt consectetur nostrud nisi aliqu utan derosi.</p>
							</div>
						</div>
					</div>
					<!-- single skill end -->
					<!-- single skill start -->
					<div class="col-md-3 col-6 text-center">
						<div class="single-skill animate-it-down">
							<div class="animateit" data-percent="67" data-scale-color="#ffb400">
								<p>67<span>%</span></p>
							</div>
							<div class="chart-content">
								<h5>joomla</h5>
								<p>Laboris enim est sint do minim nostrud tempor sunt consectetur nostrud nisi aliqu utan derosi.</p>
							</div>
						</div>
					</div>
					<!-- single skill end -->
					<!-- single skill start -->
					<div class="col-md-3 col-6 text-center">
						<div class="single-skill animate-it-up">
							<div class="animateit" data-percent="85" data-scale-color="#ffb400">
								<p>85<span>%</span></p>
							</div>
							<div class="chart-content">
								<h5>photoshop</h5>
								<p>Laboris enim est sint do minim nostrud tempor sunt consectetur nostrud nisi aliqu utan derosi.</p>
							</div>
						</div>
					</div>
					<!-- single skill end -->
					<!-- single skill start -->
					<div class="col-md-3 col-6 text-center">
						<div class="single-skill animate-it-down">
							<div class="animateit" data-percent="73" data-scale-color="#ffb400">
								<p>73<span>%</span></p>
							</div>
							<div class="chart-content">
								<h5>illustrator</h5>
								<p>Laboris enim est sint do minim nostrud tempor sunt consectetur nostrud nisi aliqu utan derosi.</p>
							</div>
						</div>
					</div>
					<!-- single skill end -->
					<!-- single skill start -->
					<div class="col-md-3 col-6 text-center">
						<div class="single-skill animate-it-left">
							<div class="animateit" data-percent="86" data-scale-color="#ffb400">
								<p>86<span>%</span></p>
							</div>
							<div class="chart-content">
								<h5>indesign</h5>
								<p>Laboris enim est sint do minim nostrud tempor sunt consectetur nostrud nisi aliqu utan derosi.</p>
							</div>
						</div>
					</div>
					<!-- single skill end -->
					<!-- single skill start -->
					<div class="col-md-3 col-6 text-center">
						<div class="single-skill animate-it-right">
							<div class="animateit" data-percent="55" data-scale-color="#ffb400">
								<p>55<span>%</span></p>
							</div>
							<div class="chart-content">
								<h5>3d max</h5>
								<p>Laboris enim est sint do minim nostrud tempor sunt consectetur nostrud nisi aliqu utan derosi.</p>
							</div>
						</div>
					</div>
					<!-- single skill end -->
				</div>
			</div>
		</section>

		<!-- work process area -->
		<section class="work-process-area pt-100 pb-100">
			<div class="container">
				<!-- section title -->
				<div class="section-title text-center animate-it-down">
					<h6>how i work</h6>
					<h3>Work Process</h3>
				</div>
				<div class="row">
					<!-- single work single-work-process -->
					<div class="col-md-2 text-center text-md-left">
						<div class="single-work-process animate-it-left">
							<div class="process-icon">
								<i class="far fa-lightbulb"></i>
							</div>
							<div class="process-text">
								<span>idea</span>
							</div>
						</div>
					</div>
					<!-- single work process end -->
					<!-- single work single-work-process -->
					<div class="col-md-2 text-center text-md-left">
						<div class="single-work-process animate-it-up">
							<div class="process-icon">
								<i class="far fa-edit"></i>
							</div>
							<div class="process-text">
								<span>sketch</span>
							</div>
						</div>
					</div>
					<!-- single work process end -->
					<!-- single work single-work-process -->
					<div class="col-md-2 text-center text-md-left">
						<div class="single-work-process animate-it-down">
							<div class="process-icon">
								<i class="fa fa-desktop"></i>
							</div>
							<div class="process-text">
								<span>design</span>
							</div>
						</div>
					</div>
					<!-- single work process end -->
					<!-- single work single-work-process -->
					<div class="col-md-2 text-center text-md-left">
						<div class="single-work-process animate-it-right">
							<div class="process-icon">
								<i class="fas fa-code"></i>
							</div>
							<div class="process-text">
								<span>code</span>
							</div>
						</div>
					</div>
					<!-- single work process end -->
					<!-- single work single-work-process -->
					<div class="col-md-2 text-center text-md-left">
						<div class="single-work-process animate-it-up">
							<div class="process-icon">
								<i class="fas fa-bug"></i>
							</div>
							<div class="process-text">
								<span>test</span>
							</div>
						</div>
					</div>
					<!-- single work process end -->
					<!-- single work single-work-process -->
					<div class="col-md-2 text-center text-md-left">
						<div class="single-work-process animate-it-left">
							<div class="process-icon last-child">
								<i class="fas fa-rocket"></i>
							</div>
							<div class="process-text">
								<span>lunch</span>
							</div>
						</div>
					</div>
					<!-- single work process end -->
				</div>
			</div>
		</section>

		<!-- contact us section -->
		<div class="contact_wrap mt-5">
			<div class="container">
				<div class="row">
					<div class="col-md-12">
						<div class="contact_area">
							<!-- section title -->
							<div class="section-title animate-it-down">
								<h6>Contact US</h6>
								<h4>Get in touch with us</h4>
							</div>
							<!-- end of section title -->

							<!-- contact form -->
							<form class="contact_form animate-it-up">
								<div class="row">
									<div class="col-md-6 col-lg-3">
										<label for="#input_name">Name<i class="fas fa-asterisk"></i></label>
										<input type="text" placeholder="enter your name" id="input_name" oninput="checkInput()" />
									</div>
									<div class="col-md-6 col-lg-3">
										<label for="#input_email">E-mail<i class="fas fa-asterisk"></i></label>
										<input type="email" placeholder="youremail@email.com" id="input_email" oninput="checkInput()" />
									</div>
									<div class="col-md-6 col-lg-3">
										<label for="#input_number">Phone<i class="fas fa-asterisk"></i></label>
										<input type="text" placeholder="(00) 123456789" id="input_number" oninput="checkInput()" />
									</div>
									<div class="col-md-6 col-lg-3">
										<label for="#input_subject">Subject<i class="fas fa-asterisk"></i></label>
										<input type="text" placeholder="subject" id="input_subject" oninput="checkInput()" />
									</div>
								</div>
								<div class="from-row">
									<div class="col-md-12">
										<label for="#input_message">Message<i class="fas fa-asterisk"></i></label>
										<input type="text" placeholder="type in your message" id="input_message" oninput="checkInput()" />
									</div>
								</div>
								<button type="submit" id="submit_btn" class="submit_btn float-sm-left float-md-right p-3" disabled>Send Message</button>
								<span id="form_notice" class="float-lg-left float-left mt-3 mb-2 w-75"></span>
							</form>
							<!-- end of contact form -->
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- contact us section -->

		<!-- map section -->
		<div class="map">
			<iframe src="https://www.amap.com/" sandbox="" height="100%" width="100%" frameborder="0" style="border: 0" allowfullscreen></iframe>
		</div>
		<!-- map section -->

		<!-- footer area -->
		<footer>
			<!-- footer wid area -->
			<div class="footer-wid-area pt-60 pb-50">
				<div class="container">
					<div class="row">
						<!-- single footer widget -->
						<div class="col-md-6 col-lg-3">
							<div class="single-footer-wid animate-it-left">
								<div class="footer-title">
									<h5>Contact Info</h5>
								</div>
								<div class="footer-info-content">
									<ul>
										<li>123 Main Street <br />New York, NY 01001</li>
										<li>support@email.com</li>
										<li>1 (800) 123 4567</li>
									</ul>
								</div>
							</div>
						</div>
						<!-- single footer wid end -->
						<!-- single footer widget -->
						<div class="col-md-6 col-lg-3">
							<div class="single-footer-wid animate-it-down">
								<div class="footer-title">
									<h5>Quicklinks</h5>
								</div>
								<div class="quick-link-wrapper">
									<ul>
										<li><a href="#">Terms and Conditions</a></li>
										<li><a href="#">Our Services</a></li>
										<li><a href="#">Privacy Policy</a></li>
										<li><a href="#">Disclaimer</a></li>
									</ul>
								</div>
							</div>
						</div>
						<!-- single footer wid end -->
						<!-- single footer widget -->
						<div class="col-md-6 col-lg-3">
							<div class="single-footer-wid animate-it-up">
								<div class="footer-title">
									<h5>Instagram Feed</h5>
									<div class="footer-insta-feed">
										<div class="row">
											<!-- single insta feed  -->
											<div class="col-3">
												<div class="footer-insta-img">
													<img src="assets/img/footer/intra-feed/insta-feed-img-1.jpg" alt="" />
													<div class="insta-hover-content">
														<a href="#"><i class="fab fa-instagram"></i></a>
													</div>
												</div>
											</div>
											<!-- single insta feed end -->
											<!-- single insta feed  -->
											<div class="col-3">
												<div class="footer-insta-img">
													<img src="assets/img/footer/intra-feed/insta-feed-img-2.jpg" alt="" />
													<div class="insta-hover-content">
														<a href="#"><i class="fab fa-instagram"></i></a>
													</div>
												</div>
											</div>
											<!-- single insta feed end -->
											<!-- single insta feed  -->
											<div class="col-3">
												<div class="footer-insta-img">
													<img src="assets/img/footer/intra-feed/insta-feed-img-3.jpg" alt="" />
													<div class="insta-hover-content">
														<a href="#"><i class="fab fa-instagram"></i></a>
													</div>
												</div>
											</div>
											<!-- single insta feed end -->
											<!-- single insta feed  -->
											<div class="col-3">
												<div class="footer-insta-img">
													<img src="assets/img/footer/intra-feed/insta-feed-img-4.jpg" alt="" />
													<div class="insta-hover-content">
														<a href="#"><i class="fab fa-instagram"></i></a>
													</div>
												</div>
											</div>
											<!-- single insta feed end -->
										</div>
										<div class="row">
											<!-- single insta feed  -->
											<div class="col-3">
												<div class="footer-insta-img">
													<img src="assets/img/footer/intra-feed/insta-feed-img-5.jpg" alt="" />
													<div class="insta-hover-content">
														<a href="#"><i class="fab fa-instagram"></i></a>
													</div>
												</div>
											</div>
											<!-- single insta feed end -->
											<!-- single insta feed  -->
											<div class="col-3">
												<div class="footer-insta-img">
													<img src="assets/img/footer/intra-feed/insta-feed-img-6.jpg" alt="" />
													<div class="insta-hover-content">
														<a href="#"><i class="fab fa-instagram"></i></a>
													</div>
												</div>
											</div>
											<!-- single insta feed end -->
											<!-- single insta feed  -->
											<div class="col-3">
												<div class="footer-insta-img">
													<img src="assets/img/footer/intra-feed/insta-feed-img-7.jpg" alt="" />
													<div class="insta-hover-content">
														<a href="#"><i class="fab fa-instagram"></i></a>
													</div>
												</div>
											</div>
											<!-- single insta feed end -->
											<!-- single insta feed  -->
											<div class="col-3">
												<div class="footer-insta-img">
													<img src="assets/img/footer/intra-feed/insta-feed-img-8.jpg" alt="" />
													<div class="insta-hover-content">
														<a href="#"><i class="fab fa-instagram"></i></a>
													</div>
												</div>
											</div>
											<!-- single insta feed end -->
										</div>
									</div>
								</div>
							</div>
						</div>
						<!-- single footer wid end -->
						<!-- single footer widget -->
						<div class="col-md-6 col-lg-3">
							<div class="single-footer-wid animate-it-right">
								<div class="footer-title">
									<h5>Connect With Us</h5>
									<div class="footer-icon">
										<a href="#"><i class="fab fa-facebook-f"></i></a>
										<a href="#"><i class="fab fa-twitter"></i></a>
										<a href="#"><i class="fab fa-google"></i></a>
										<a href="#"><i class="fab fa-pinterest-p"></i></a>
										<a href="#"><i class="fab fa-instagram"></i></a>
										<a href="#"><i class="fa fa-wifi"></i></a>
									</div>
								</div>
							</div>
						</div>
						<!-- single footer wid end -->
					</div>
				</div>
			</div>

			<!-- footer copyright area -->
			<div class="footer-copyright">
				<div class="container">
					<div class="row">
						<div class="col-12 animate-it-down">
							<p>Copyright 2025 © All Rights Reserved. <a target="_blank" href="https://www.mobanwang.com/" title="网站模板">网站模板</a></p>
						</div>
					</div>
				</div>
			</div>
		</footer>
		<!-- footer area end -->

		<!-- Code end -->

		<!-- Jquery -->
		<script src="assets/js/vendor/modernizr-3.6.0.min.js"></script>
		<script src="assets/js/vendor/jquery-1.12.4.min.js"></script>
		<!-- Bootstrap -->
		<script src="assets/js/popper.min.js"></script>
		<script src="assets/js/bootstrap.min.js"></script>
		<!-- Plugins -->
		<script src="assets/js/owl.carousel.min.js"></script>
		<script src="assets/js/jquery.meanmenu.min.js"></script>
		<script src="assets/js/waypoints.min.js"></script>
		<script src="assets/js/jquery.counterup.min.js"></script>
		<script src="assets/js/isotope.pkgd.min.js"></script>
		<script src="assets/js/slick.min.js"></script>
		<script src="assets/js/animateit.js"></script>
		<script src="assets/js/jquery.easypiechart.min.js"></script>
		<!-- Custom JS -->
		<script src="assets/js/main.js"></script>
	</body>
</html>
